<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 100px;
            height: 80px;
            /* 圆角边框 */
            border-radius: 10px;
            border: 3px solid #000;
            /* 弹性布局 */
            display: flex;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;
        }

        .div01 {
            width: 10px;
            height: 10px;
            border-radius: 10px;
            border: 5px solid #000;
            /* border-radius: 50px; */
            /* border: 3px solid #000; */
            background-color: #000;
        }

        .div2 {
            width: 100px;
            height: 80px;
            border-radius: 10px;
            border: 3px solid #000;
            display: flex;
            /* 元素从下而上 */
            flex-direction: column;
            /* 布局方式，两边元素紧贴边框 */
            justify-content: space-between;
            /* 居中对齐 */
            align-items: center;

        }

        .div3 {
            width: 100px;
            height: 80px;
            border-radius: 10px;
            border: 3px solid #000;
            display: flex;
            justify-content: space-between;
        }

        .div3 .div01:nth-child(2) {
            /* 单独定义某一个元素居中对齐 */
            align-self: center
        }

        .div3 .div01:nth-child(3) {
            /* 单独定义某一个元素侧轴终边对齐 */
            align-self: flex-end
        }


        .div4 {
            width: 100px;
            height: 80px;
            border-radius: 10px;
            border: 3px solid #000;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .div4 .div01:nth-child(1) {
            /* align-self: flex-start */
            margin-right: 60px;
        }

        .div4 .div01:nth-child(3) {
            /* 侧轴对齐元素 */
            align-self: flex-end
        }

        .div4 .div01:nth-child(4) {
            align-self: flex-end
        }

        .div5 {
            width: 100px;
            height: 80px;
            border-radius: 10px;
            border: 3px solid #000;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .big06 {
            /* width: 100px; */
            /* height: 80px; */
            /* border-radius: 10px; */
            /* border: 3px solid #000; */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .big05 {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .div6 {
            width: 100px;
            height: 80px;
            border-radius: 10px;
            border: 3px solid #000;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .div6 .div01:nth-child(1) {
            margin-right: 20px;
            /* align-self: flex-end; */
        }

        .div6 .div01:nth-child(2) {
            margin-right: 20px;
            /* align-self: flex-end */
        }

        .div6 .div01:nth-child(4),
        .div6 .div01:nth-child(5),
        .div6 .div01:nth-child(6) {
            align-self: flex-end;
        }



        .div7 {
            width: 100px;
            height: 80px;
            border-radius: 10px;
            border: 3px solid #000;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            justify-content: space-between;
        }

        .div7 .div01:nth-child(4) {
            margin: 0 40px;
        }


        .div8 {
            width: 100px;
            height: 80px;
            border-radius: 10px;
            border: 3px solid #000;
            display: flex;
            flex-direction: column;
            /* flex-wrap: wrap; */
            /* align-content: space-between; */
            justify-content: space-between;
        }

        /* .div8 .div01:nth-child(4) {
            margin-right: 60px;
        }
 */

        .head {
            width: 100%;

            display: flex;
        }

.div8>div{
display: flex;
justify-content: space-between;
/* flex-direction: column; */
}



    </style>
</head>

<body>

    <div class="head">

        <div class="div1">
            <div class="div01"></div>
        </div>

        <div class="div2">
            <div class="div01"></div>
            <div class="div01"></div>
        </div>

        <div class="div3">
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
        </div>



        <div class="div4">
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
        </div>

        <div class="div5">
            <div class="big05">
                <div class="div01"></div>
                <div class="div01"></div>
            </div>
            <div class="big06">
                <div class="div01"></div>
            </div>
            <div class="big05">
                <div class="div01"></div>
                <div class="div01"></div>
            </div>

        </div>

        <div class="div6">
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
        </div>

        <div class="div7">
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
            <div class="div01"></div>
        </div>

        <div class="div8">
            <div>
                <div class="div01"></div>
                <div class="div01"></div>
                <div class="div01"></div>
            </div>

            <div>
                <div class="div01"></div>
                <div class="div01"></div>


            </div>

            <div>
                <div class="div01"></div>
                <div class="div01"></div>
                <div class="div01"></div>



            </div>



        </div>











    </div>



</body>

</html>